<template>
  <div>
    <c-title :hide="false" text="分红池"></c-title>
    <div class="info_list">
      <div style="display: flex; background: #fff;align-items: center; justify-content: center;">
        <van-tabs style="flex: 1;" v-model="activeName" @click="handleClick">
        
          <van-tab title="一区"></van-tab>
          <van-tab title="二区"></van-tab>
          <van-tab title="三区"></van-tab>
          <van-tab title="四区"></van-tab>
        </van-tabs>
        <!-- <div style=" width: 80px;" @click="goMyservicecenter()" >更多</div> -->
      </div>

      <!-- <mt-tab-container v-model="activeName"> -->
      <!--<el-tabs v-model="activeName" @tab-click="handleClick">-->
        <div class="list_box">
          <div class="search">
            <div class="search-box">
              <form @submit.prevent action="#">
                <input type="search" placeholder="搜索会员信息/昵称/手机号" @keypress="enterSearch" v-model="keyword"
                  style="width: 150%;" />
              </form>
              <i class="iconfont icon-sousuo1" style="color: #ccc;" @click="getData"></i>
            </div>
          </div>
          <div class="list" v-for="(item, index) in new_content" :key="index">
            <div class="list_top" >
              <div class="header_left">

                <ul class="name">
                  <li style="">
                    <div
                      style="float: left; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                      {{ item.realname }}
                    </div>
                    <div class="member-id" style="float: left; color:#fff;" >
                      {{ item.mobile }}
                    </div>
<!-- 
                    <div style="float: left;margin-left: 10px; font-size: 12px; font-weight: bold;">
                      {{ item.level_name }}
                    </div> -->
                  </li>
                  <li>
                    {{ item.create_date }}
                  </li>
                </ul>
              </div>
            </div>
            <div class="order_info">
              <ul class="order_number">
                <li>小区业绩：{{ item.xj_xq_yj }}</li>
                <!-- <li>总客户数：233个</li> -->
              </ul>
              <ul class="order_sum">
                <!-- {{ $i18n.t("元") }} -->
                <li>团队总业绩{{ item.xj_team_total_yj }}</li>
                <!-- <li>客户总订单：2330{{$i18n.t('元')}}</li> -->
              </ul>
            </div>
          </div>
        </div>
    </div>
  </div>

</template>


<script>
import fenhongchi_controller from "./fenhongchi_controller";

export default fenhongchi_controller;
</script>

<style lang="scss" scoped>
.info_list {
  margin: 0.625rem 0;

  .list_box {
    .list {
      background-color: #fff;
      margin-bottom: 0.625rem;

      .list_top {
        padding: 0.75rem 0;
        display: flex;
        justify-content: space-between;
        border-bottom: solid 0.0625rem #ebebeb;

        .header_left {
          padding-left: 0.75rem;
          display: flex;

          .img {
            position: relative;
            width: 2.8rem;
            height: 2.8rem;
            // border-radius: 1.25rem;
            overflow: hidden;
            margin-right: 0.625rem;

            img {
              // width: 100%;
              width: 2.5rem;
              height: 2.5rem;
              border-radius: 1.25rem;
            }
          }

          .name {
            text-align: left;
            width: 12rem;

            li:first-child {
              font-size: 16px;
              color: #333;
              line-height: 1.5rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            li:last-child {
              font-size: 14px;
              color: #8c8c8c;
              line-height: 1rem;
            }

            .member-id {
              display: inline-block;
              padding: 0 0.5rem;
              margin-left: 0.5rem;
              color: #f15353;
              background: #ffe4dc;
              line-height: 20px;
              font-size: 13px;
              border-radius: 1rem;
            }
          }
        }

        .header_right {
          padding-right: 0.625rem;
          display: flex;

          .Wechat,
          .phone,
          .news {
            width: 2.5rem;
            height: 2.5rem;

            img {
              width: 1.75rem;
              margin-top: 0.375rem;
            }
          }
        }
      }

      .order_info {
        padding: 0.625rem 0;
        display: flex;

        .order_number,
        .order_sum {
          width: 50%;
          text-align: left;

          li {
            line-height: 1.625rem;
            font-size: 14px;
            padding: 0 0.625rem;
          }
        }
      }
    }
  }
}

.search {
    height: 2.8125rem;
    line-height: 2.8125rem;
    position: relative;
    display: flex;
    overflow: hidden;
    background: #fff;
    border-bottom: 0.0625rem solid #f5f5f5;

    .back {
      width: 2.8125rem;

      i {
        line-height: 2.8125rem;
        font-size: 1.5rem;
      }
    }

    .search-box {
      position: relative;
      display: flex;
      justify-content: space-between;
      width: 85%;
      margin-left: 7.5%;
      margin-top: 0.5rem;
      padding: 0 0.625rem;
      background-color: #f2f2f2;
      height: 1.75rem;
      line-height: 1.75rem;
      border-radius: 0.875rem;

      input {
        flex: 1;
        line-height: 1.75rem;
        border: none;
        color: #333;
      }

      i {
        position: absolute;
        right: 1rem;
        flex: 0 0 1.5rem;
      }
    }
  }
</style>